<template>
  <div class="container" v-bind:style="{height: windowHeight + 'px' }">
    <div class="words">请选择需要演示的职位</div>
    <ul class="account_ul">
      <li class="account" @tap="change_role(18601780358)" :class="user_id == 287 ? 'cur':''">
        <span class="account_icons male"></span>
        董事长<small>(演示账号【演示连锁店】)</small>
        <span class="grey_arrow"></span>
      </li>
      <li class="account" @tap="change_role(18816508467)" :class="user_id == 301 ? 'cur':''">
        <span class="account_icons male"></span>
        区域经理<small>(演示账号【演示连锁店】)</small>
        <span class="grey_arrow"></span>
      </li>
      <li class="account" @tap="change_role(18298255925)" :class="user_id == 297 ? 'cur':''">
        <span class="account_icons male"></span>
        门店店长<small>(演示账号【演示一店】)</small>
        <span class="grey_arrow"></span>
      </li>
      <li class="account" @tap="change_role(13916159640)" :class="user_id == 298 ? 'cur':''">
        <span class="account_icons female"></span>
        美容部经理<small>(演示账号【演示一店】)</small>
        <span class="grey_arrow"></span>
      </li>
      <li class="account" @tap="change_role(13818373312)" :class="user_id == 299 ? 'cur':''">
        <span class="account_icons female"></span>
        美发部经理<small>(演示账号【演示一店】)</small>
        <span class="grey_arrow"></span>
      </li>
      <li class="account" @tap="change_role(13262233279)" :class="user_id == 300 ? 'cur':''">
        <span class="account_icons female"></span>
        美容一组顾问<small>(演示账号【演示一店.美容一组】)</small>
        <span class="grey_arrow"></span>
      </li>
      <li class="account" @tap="change_role(13917648386)" :class="user_id == 288 ? 'cur':''">
        <span class="account_icons female"></span>
        美容师<small>(演示账号【演示一店.美容一组】)</small>
        <span class="grey_arrow"></span>
      </li>
      <li class="account" @tap="change_role(17701572799)" :class="user_id == 302 ? 'cur':''">
        <span class="account_icons female"></span>
        美发师<small>(演示账号【演示一店.美发一组】)</small>
        <span class="grey_arrow"></span>
      </li>
    </ul>
  </div>
</template>

<script>
import wx from 'wx'
import Toast from '@/utils/toast'
import user from '@/services/user'
export default {
  data () {
    return {
      windowHeight: 0,
      user_id: 0
    }
  },

  components: {
  },
  onLoad () {
    this.user_id = wx.getStorageSync('userInfo').user_id
  },
  onShow () {
    this.user_id = wx.getStorageSync('userInfo').user_id
  },
  methods: {
    change_role (obj) {
      // 登录操作
      // 获取登录信息
      let form = {
        orcode: '100088',
        username: obj,
        password: obj
      }
      user.loginBypassword(form).then(res => {
        this.globalData.userInfo = res.data[1]
        Toast(res.msg, 'success')
        wx.setStorageSync('login_type', 2);
        wx.reLaunch({
          url: '/pages/basic/mine/mine'
        })
      }).catch((err) => {
        console.log('登陆失败', err)
        Toast(err.msg, 'fail')
      });
    }
  },
  created () {
    let that = this
    wx.getSystemInfo({
      success (res) {
        that.windowHeight = res.windowHeight
      }
    })
  },
  onReady () {
  }
}
</script>

<style scoped>
.container {
  height: 100%;
}
.words {
  width: 100%;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 60rpx;
  color: rgba(102, 102, 102, 1);
  padding-left: 14rpx;
}
.account_ul {
  width: 100%;
  background: #fff;
}
.account_ul .account {
  width: 100%;
  padding-left: 28rpx;
  height: 94rpx;
  line-height: 94rpx;
  font-size: 32rpx;
  color: rgba(51, 51, 51, 1);
  position: relative;
  background: #fff;
}
.account_ul .account.cur {
  color: #ff4444;
}
.account_ul .account::after {
  content: '';
  position: absolute;
  left: 28rpx;
  bottom: 0;
  width: 100%;
  height: 2rpx;
  background: RGBA(153, 153, 153, 0.2);
}
.account_ul .account small {
  display: inline;
  font-size: 24rpx;
  margin-left: 10rpx;
}
.account_ul .account:last-child::after {
  background: RGBA(153, 153, 153, 0);
}
.account_ul .account .account_icons {
  display: inline-block;
  width: 56rpx;
  height: 56rpx;
  margin-right: 10rpx;
  position: relative;
  top: 12rpx;
}
.account_ul .account .account_icons.male {
  background: url(http://mytimg.178mr.com/male.png) no-repeat;
  background-size: 100%;
}
.account_ul .account .account_icons.female {
  background: url(http://mytimg.178mr.com/female.png) no-repeat;
  background-size: 100%;
}
.account_ul .account .grey_arrow {
  position: absolute;
  width: 12rpx;
  height: 28rpx;
  background: url(http://mytimg.178mr.com/grey_arrow.png) no-repeat;
  background-size: 100%;
  top: 36rpx;
  right: 46rpx;
}
</style>
